.avatar_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: -5px;
  margin-right: -5px;

  &--full {
    margin-left: -15px;
    margin-right: -15px;
  }

  &-item {
    position: relative;
    width: 60px;
    margin: 5px 5px 23px;
    text-align: center;

    @include breakpoint(mobile, max) {
      margin-bottom: 5px;
    }

    .avatar_list--full & {
      flex: 0 1 180px;
      display: flex;
      align-items: center;
      width: auto;
      margin: 5px 15px;
      text-align: left;
    }

    img {
      background: $black;
      width: 60px;
      height: 60px;
      border-radius: 3px;
    }

    p {
      margin: 0;
      padding: 5px 0;
      background: $black;
      font-size: 0.75em;
      line-height: 1.2;
      color: $medium-grey-alt;
      transition: color 0.1s $base-easing;
      overflow: hidden; // Clips extra-long names to avoid overlap

      @include breakpoint(mobile, max) {
        display: none;
      }
    }

    .avatar_list--full & p {
      max-width: 110px; // Allows full names to auto wrap within a constrained width
      padding: 0 0 0 15px;
      font-size: 1em;
      font-weight: 500;

      @include breakpoint(mobile, max) {
        display: block;
      }
    }

    &:hover p {
      color: $white;
    }
  }
}
